<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>数据填报</el-breadcrumb-item>
      <el-breadcrumb-item>填报记录</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card>
      <!-- 施工员 -->
      <!-- 实验员 试验检测记录 -->
      <div class="experiment" v-if="arr.indexOf('experiment') > -1">
        <el-row>
          <el-col :span="17"><span class="title">实验员-试验检测填报记录</span></el-col>
          <el-col :span="7">
            <el-input placeholder="请输入试验名称" v-model="expQuery.query" @keyup.enter="getExperiment()" clearable @clear="getExperiment()">
              <template #append>
                <el-button icon="el-icon-search" @click="getExperiment()"></el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="experiment" border stripe style="margin-bottom:15px">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column min-width="160" label="试验名称" prop="experimentContentName"></el-table-column>
          <!-- 关联项目编号 -->
          <el-table-column min-width="140" label="关联项目" prop="itemName">
            <template v-slot="scope"><span>{{scope.row.itemName?scope.row.itemName:'无'}}</span></template>
          </el-table-column>
          <el-table-column label="上报时间" prop="createTime"></el-table-column>
          <el-table-column label="清单量" prop="inventoryQuantity"></el-table-column>
          <el-table-column label="公式" prop="formula"></el-table-column>
          <el-table-column label="应作量" prop="requiredQuantity"></el-table-column>
          <el-table-column label="上报量" prop="reportedQuantity"></el-table-column>
          <el-table-column label="上报员" prop="reportId"></el-table-column>
          <el-table-column label="状态">
            <template v-slot="scope">
              <span v-if="scope.row.status==2">不通过</span>
              <span v-if="scope.row.status==1">已通过</span>
              <span v-if="scope.row.status==0">未审核</span>
            </template>
          </el-table-column>
          <el-table-column label="审核主管">
            <template v-slot="scope">
              <span v-if="scope.row.status==0">无</span>
              <span v-else>{{scope.row.reviewId}}</span>
            </template>
          </el-table-column>
          <el-table-column label="原因">
            <template v-slot="scope">
              <span>{{scope.row.status==2?scope.row.reason:'无'}}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-config-provider :locale="locale">
        <el-pagination
          @size-change="expSizeChange"
          @current-change="expCurChange"
          :current-page="expQuery.pagenum"
          :page-sizes="[5,10,20]"
          :page-size="expQuery.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="expTotal"
        ></el-pagination>
      </el-config-provider>
      </div>

      <!-- 资料员 资料记录 -->
      <div class="document" v-if="arr.indexOf('document') > -1">
        <el-row>
          <el-col :span="17"><span class="title">资料员-资料填报记录</span></el-col>
          <el-col :span="7">
            <el-input placeholder="请输入资料名称" v-model="docQuery.query" @keyup.enter="getDocument()" clearable @clear="getDocument()">
              <template #append>
                <el-button icon="el-icon-search" @click="getDocument()"></el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="document" border stripe style="margin-bottom:15px">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="册数" prop="volume"></el-table-column>
          <el-table-column label="文件材料名称" prop="documentContentName"></el-table-column>
          <el-table-column label="编制完成" prop="isOrganization">
            <template v-slot="scope"><span>{{scope.row.isOrganization?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="监理已签认" prop="isSupervisor">
            <template v-slot="scope"><span>{{scope.row.isSupervisor?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="设计已签认" prop="isDesign">
            <template v-slot="scope"><span>{{scope.row.isDesign?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="建设单位已签认" prop="isConstruction">
            <template v-slot="scope"><span>{{scope.row.isConstruction?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="已移交档案馆" prop="isArchives">
            <template v-slot="scope"><span>{{scope.row.isArchives?'是':'否'}}</span></template>
          </el-table-column>
          <el-table-column label="上报员" prop="reportUserId"></el-table-column>
          <el-table-column label="状态">
            <template v-slot="scope">
              <span v-if="scope.row.status==2">不通过</span>
              <span v-if="scope.row.status==1">已通过</span>
              <span v-if="scope.row.status==0">未审核</span>
            </template>
          </el-table-column>
          <el-table-column label="审核主管">
            <template v-slot="scope">
              <span v-if="scope.row.status==0">无</span>
              <span v-else>{{scope.row.reviewId}}</span>
            </template>
          </el-table-column>
          <el-table-column label="原因">
            <template v-slot="scope">
              <span>{{scope.row.status==2?scope.row.reason:'无'}}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-config-provider :locale="locale">
        <el-pagination
          @size-change="docSizeChange"
          @current-change="docCurChange"
          :current-page="docQuery.pagenum"
          :page-sizes="[5,10,20]"
          :page-size="docQuery.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="docTotal"
        ></el-pagination>
      </el-config-provider>
      </div>

      <!-- 合约员 -->
    </el-card>
  </div>
</template>

<script>
import zhCn from "element-plus/lib/locale/lang/zh-cn";

export default {
  data() {
    return {
      arr:['document','experiment'],
      experiment: [],
      expQuery:{
        query:"",
        pagenum:1,
        pagesize:5
      },
      expTotal:0,

      document: [],
      docQuery:{
        query:"",
        pagenum:1,
        pagesize:5
      },
      docTotal:0,
    };
  },
  setup() {
    return {
      locale: zhCn
    };
  },
  mounted() {
    if(this.arr.indexOf('document') > -1){
      this.getDocument();
    }
    if(this.arr.indexOf('experiment')>-1){
      this.getExperiment();
    }
  },
  methods: {
    // 获取试验数据
    async getExperiment() {
      const { data: res } = await this.$http.get("experimenter/getReportedExperiment",{
        params: this.expQuery
      });
      console.log(res);
      if (res.code !== 200) return this.$message.error(res.msg);
      this.experiment = res.data.list;
      this.expTotal = res.data.total;
    },
    // 监听 pageSize 改变的事件
    expSizeChange(newSize) {
      // console.log(newSize);
      this.expQuery.pagesize = newSize;
      this.getExperiment();
    },
    // 页码值
    expCurChange(newPage) {
      // console.log(newPage);
      this.expQuery.pagenum = newPage;
      this.getExperiment();
    },
// 获取资料数据
    async getDocument() {
      const { data: res } = await this.$http.get("documenter/getReportedDocument",{
        params: this.docQuery
      });
      console.log(res);
      if (res.code !== 200) return this.$message.error(res.msg);
      this.document = res.data.list;
      this.docTotal = res.data.total;
    },
    // 监听 pageSize 改变的事件
    docSizeChange(newSize) {
      // console.log(newSize);
      this.docQuery.pagesize = newSize;
      this.getDocument();
    },
    // 页码值
    docCurChange(newPage) {
      // console.log(newPage);
      this.docQuery.pagenum = newPage;
      this.getDocument();
    }
  }
};
</script>

<style lang="less" scoped>
.title{
    font-size: 14px;
    color:#666;
    display: block;
    padding:10px 0 0 2px;
  }
</style>
